<template>
  <div class="upload">

    <!-- <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      name="file"
      accept="image/png, image/jpeg"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :style="`width: ${width}; height: ${height}`"
    >
      <img
        v-if="imgUrl.absoluteUrl"
        :src="imgUrl.absoluteUrl"
        class="avatar"
        :style="`width: ${width}; height: ${height}`"
      >
      <i v-else class="el-icon-picture-outline avatar-uploader-icon" />
    </el-upload> -->
    <el-upload action="#" :show-file-list="false" :auto-upload="false" :multiple="false" :on-change="uploadFile" drag
      accept="image/jpg,image/jpeg,image/png">
      <!-- <i v-if="imageUrl" class="el-icon-circle-close deleteImg" @click.stop="handleRemove" /> -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <div v-else>

        <i class="el-icon-picture-outline avatar-uploader-icon" />
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
// import { setOrderStatus } from '接口路径'
class UploadOptions {
  url = process.env.VUE_APP_BASE_API + '/admin/file/save';
  // url = getToken('api_domain') + '/admin/file/save';
  header = {
    'Auth-Key': getToken('auth_key') ? getToken('auth_key') : '',
    'Session-Id': getToken('session_id') ? getToken('session_id') : '',
    'Platform': 'pc'
  }
}
class Img {
  absoluteUrl = '';
  relativeUrl = '';
}
export default {
  name: 'ImgUploadOne',
  props: {
    existUrl: {
      type: Object,
      default: () => {
        return {
          absoluteUrl: '',
          relativeUrl: ''
        };
      }
    },
    width: {
      type: String,
      default: '146px'
    },
    height: {
      type: String,
      default: '146px'
    },
    fileDir: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      uploadOptions: new UploadOptions(),
      imgUrl: new Img(), // 图片
      formData: '',
      imageUrl: '',
      orderId: '',
      userId: '',
      userName: ''
    };
  },
  watch: {
    existUrl (newVal) {
      // console.log(newVal);
      if (newVal) {
        this.imgUrl = this.existUrl;
      }
    }
  },
  mounted () {
    // console.log(this.existUrl);
    this.imgUrl = this.existUrl;
    if (this.fileDir) {
      this.uploadOptions.header['file-dir'] = this.fileDir;
    }
    // console.log(this.uploadOptions.header.file_dir);
  },
  methods: {
    // // 初始化图片显示
    // open() {
    //   this.imgUrl = '';
    // },
    // // 图片上传校验
    // beforeAvatarUpload(file) {
    //   // console.log(file.type);
    //   if (file.type.indexOf('image') == -1) {
    //     this.$message.error('请上传正确的图片格式');
    //     return false;
    //   }
    //   const isLt10M = file.size / 1024 / 1024 < 10;
    //   if (!isLt10M) {
    //     this.$message.error('上传凭证图片大小不能超过10MB!');
    //     return false;
    //   }
    // },
    // // 上传图片成功回调
    // handleAvatarSuccess(res) {
    //   console.log(res);
    //   if (res) {
    //     const { data } = res;
    //     this.imgUrl = {
    //       absoluteUrl: data.file_path,
    //       relativeUrl: data.save_name
    //     };
    //     this.$emit('setUrl', this.imgUrl);
    //   } else {
    //     this.$message.info(res.msg);
    //   }
    // },
    uploadFile (item) {
      this.formData = item.raw; // 图片文件
      this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
      // console.log(this.imageUrl, 'imageUrl');
      // console.log(this.formData, 'formData');
    },
    handleRemove () {
      this.imageUrl = '';
    },
    submitOrder () {
      var formData = new FormData();
      formData.append('photoFile', this.formData); // 照片文件
      formData.append('orderId', this.orderId); // 其他参数
      formData.append('userId', this.user.id); // 其他参数
      formData.append('userName', this.user.username); // 其他参数
      // setOrderStatus(formData).then(res => {
      //   console.log(res);
      // }, err => {
      //   console.log(err);
      // });
    }
  }
};
</script>

<style scoped lang="scss">
$img_width: 146px;
$img_height: 146px;
.avatar-uploader ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep.el-upload:hover {
  border-color: #8b2e2f;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: $img_width;
  height: $img_height;
  line-height: $img_height;
  text-align: center;
}
::v-deep .el-upload-dragger {
  width: $img_width;
  height: $img_height;
}
.avatar {
  width: $img_width !important;
  height: $img_height !important;
  margin-top: 0 !important;
  display: block;
}

.deleteImg {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>
